<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row >
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.farmId" placeholder="请选择园区" @select="farmChange">
                  <a-select-option
                      v-for="(item, index) in farmList"
                      :key="index" :value="item.FarmId">
                    {{item.FarmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择地块" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.greenHouseId" placeholder="请选择地块">
                  <a-select-option
                      v-for="(item, index) in greenHouseList"
                      :key="index" :value="item.GreenHouseId">
                    {{item.GreenHouseName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <div style="margin: 3px 0 0 8px;">
                <a-button type="primary" @click="search">查询</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-space class="operator" v-if="this.data.traceId">
        <a-button @click="add" type="primary">新建</a-button>
      </a-space>
      <standard-table style="margin-top: 10px"
                      :loading="loading"
                      :rowKey="(data, index) => index"
                      :columns="columns"
                      :dataSource="checkList">
        <div slot="CheckStatus" slot-scope="{text}">
          <a-tag :color="text == '正常' ? 'green' : 'red'">
            {{text}}
          </a-tag>
        </div>
      </standard-table>
    </div>
    <!-- modal -->
    <a-modal
        title="新建检测"
        width="900px"
        :visible="visible"
        @ok="confirm"
        @cancel="cancel">
      <a-form-model
          ref="traceCheckForm"
          :model="data"
          :rules="rules"
          :label-col="{span: 4}"
          :wrapper-col="{span: 14}">
        <a-form-model-item label="检测类型" prop="checkType">
          <a-select v-model="data.checkType" placeholder="请选择类型" @select="typeChange">
            <a-select-option
                v-for="(item, index) in checkTypeList"
                :key="index" :value="item">
              {{item}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="检测时间" prop="checkTime">
          <a-date-picker
              v-model="data.checkTime"
              type="date"
              placeholder="选择操作日期"
              style="width: 200px;"
              @change="dateChange"
          />
        </a-form-model-item>
        <a-form-model-item label="检测结果" prop="checkStatus">
          <a-radio-group v-model="data.checkStatus">
            <a-radio value="正常">正常</a-radio>
            <a-radio value="异常">异常</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
  import StandardTable from '@/components/table/StandardTable'
  import {list as farmList} from '@/services/farm'
  import {list as greenHouseList} from '@/services/greenhouse'
  import {info, checkAdd} from '@/services/trace'
  const columns = [
    {
      title: '操作名称',
      dataIndex: 'CheckType',
      scopedSlots: { customRender: 'CheckType' }
    },{
      title: '检测时间',
      dataIndex: 'CheckTime',
      scopedSlots: { customRender: 'CheckTime' }
    },{
      title: '检测结果',
      dataIndex: 'CheckStatus',
      scopedSlots: { customRender: 'CheckStatus' }
    }
  ]
  export default {
    name: "TraceCheck",
    data() {
      return {
        loading: false,
        visible: false,
        columns,
        farmList: [],
        greenHouseList: [],
        checkList: [],
        query: {
          farmId: undefined,
          greenHouseId: undefined
        },
        checkTypeList: ['土壤检测', '质量检测'],
        data: {
          traceId: '',
          checkType: '土壤检测',
          checkTime: null,
          checkStatus: '正常'
        },
        rules: {
          checkType: [
            { required: true, message: '请选择类型', trigger: 'blur' },
          ],
          checkTime: [
            { required: true, message: '请选择操作日期', trigger: 'change' },
          ],
          checkStatus: [
            { required: true, message: '请选择检测结果', trigger: 'change' },
          ]
        }
      }
    },
    components: {
      StandardTable
    },
    created() {
      this.getFarmList()
    },
    methods: {
      async getFarmList() {
        let res = await farmList()
        this.farmList = res.Data
      },
      async getGreenHouseList() {
        let res = await greenHouseList(this.query.farmId)
        this.greenHouseList = res.Data
      },
      search() {
        this.loading = true
        this.data.traceId = '' //重置
        info(this.query.greenHouseId).then(res => {
          if(res.Code == 0) {
            this.checkList = res.Data.Checks
            this.data.traceId = res.Data.Id
            if(this.checkList.length == 0) {
              this.$message.success('记录为空')
            }
          } else this.$message.warning('溯源信息不存在')
        }).catch(err => {
          console.log(err);
          this.$message.error('请求失败')
        })
        this.loading = false
      },
      confirm() {
        this.$refs.traceCheckForm.validate(valid => {
          if (valid) {
            console.log(this.data);
            checkAdd(this.data).then(res => {
              if(res.Code == 0) {
                this.$message.success('创建成功')
                this.search()
              } else this.$message.error('操作失败')
            }).catch(err => {
              console.log(err);
              this.$message.error('操作失败')
            })
            this.visible = false
          }
        })
      },
      cancel() {
        this.visible = false
        this.$refs.traceCheckForm.resetFields();
        this.data = this.$options.data().data
      },
      add() {
        this.visible = true
      },
      dateChange(e, v) {
        console.log(v);
        this.data.checkTime = v
      },
      editRecord(row) {

      },
      delRecord(row) {

      },
      farmChange() {
        this.query.greenHouseId = undefined
        this.getGreenHouseList()
      },
      typeChange(e) {
        console.log(e);
      },
    }
  }
</script>

<style scoped>

</style>
